<template>
	<div class="chart-pane-words">
		<!-- 热词-->
		<div id="EchartsWord"></div>
	</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
export default{
	name:'EchartsWord',
	data(){
		return {
		}
	},
	computed: {
    },
    mounted(){
    	var that = this;
    	that.getWordCloud();
	},
	props:['seriesData'],
	methods:{
		getWordCloud(){
			let that=this;
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('EchartsWord'));
			// 绘制图表
			myChart.setOption({
			    series: [
					{
						type: 'wordCloud',
				        gridSize: 2,
				        sizeRange: [12, 50],
				        rotationRange: [-90, 90],
				        shape: 'pentagon',
				        textStyle: {
				            normal: {
				                color: function () {
				                    return 'rgb(' + [
				                            Math.round(Math.random() * 255),
				                            Math.round(Math.random() * 255),
				                            Math.round(Math.random() * 255)
				                        ].join(',') + ')';
				                }
				            },
				            emphasis: {
				                shadowBlur: 10,
				                shadowColor: '#333'
				            }
				        },
				        data: that.seriesData
				   }]
			});
		}
	},
	watch:{
		seriesData(curVal,oldVal){
			//console.log(curVal,'新值');
			//console.log(oldVal,'旧值');
			this.getWordCloud();
		}
	}
}
</script>
<style scoped>
#EchartsWord{
	width:400px;
	height: 300px;
	margin:0 auto;
}
</style>